<!-- 客户列表 -->
<template>
    <div class="DealerInfoStyle">
        <div class="cardAdmin">
            <div class="formContainer">
                <div class="formSearch">
                    <span
                        style="padding: 0 10px; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">名称：</span>
                    <el-input style="flex: 3;" v-model="form.title"></el-input>
                </div>
                <div style="margin: auto 0 auto auto;padding-bottom: 5px;padding-right: 10px;">
                    <el-button icon="el-icon-refresh" size="small" @click="resetForm()">重置</el-button>
                    <el-button type="primary" icon="el-icon-search" size="small"
                        @click="get_homepageCarouselList()">搜索</el-button>
                </div>
                <div style="position: absolute;left: 10px;bottom: 5px;">
                    <el-button type="success" icon="el-icon-circle-plus-outline" size="small"
                        @click="addbtn()">新增图片</el-button>
                </div>
            </div>
        </div>

        <!-- 表格 -->
        <el-table :data="CompanyTable" border style="width: 100%;min-height: 78%;max-height: 78%;overflow: auto;">
            <el-table-column prop="id" label="id" width="60" fixed="left" align="center">
            </el-table-column>
            <el-table-column prop="image" label="图片" width="auto" min-width="180px" align="center">
                <template slot-scope="scope">
                    <el-image style="width: 50px;" :src=" scope.row.image" :fit="roleHeadgear"
                         :preview-src-list="[ scope.row.image]">
                        <div slot="error" class="image-slot" style="width: 50px;">
                            <div style="width: 50px;">{{ scope.row.image == '' ? '加载失败' : '空图片或者地址错误' }}</div>
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="名称" width="auto" min-width="250px" align="center">
            </el-table-column>
            <el-table-column prop="add_time" label="添加时间" width="auto" min-width="180px" align="center">
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right" align="center">
                <template slot-scope="scope">
                    <el-button @click="tableEditing(scope.row)" type="primary" plain size="small">编辑</el-button>
                    <el-button @click="del_homepageCarouselDeletion(scope.row.id)" type="danger" plain
                        size="small">刪除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="text-align: right; margin-top: 5px;">
            <el-pagination background layout="prev, pager, next,total" :total="total" :page-size="pagesize"
                @current-change="current_change"></el-pagination>
        </div>

        <!-- 弹窗 -->
        <el-dialog :title="titles" :visible.sync="dialogVisible" width="50%" @close="handleClose" top="15vh">
            <div class="pop-up-form">
                <div class="form-options">
                    <span
                        style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">名称：</span>
                    <el-input style="flex: 6;" v-model="addform.title"></el-input>
                </div>
                <div class="form-options">
                    <span
                        style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">图片：</span>
                    <input style="flex: 6;line-height: 40px;" type="file" ref="fileInput" id="roleHeadgear" accept="image/*"
                        @change="handleFileChange" required />
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button v-show="titles == '新增'" type="primary" @click="add_addHomepageCarousel()" size="small">确
                    定</el-button>
                <el-button v-show="titles == '编辑'" type="primary" @click="upd_homepageCarouselEditor()" size="small">更
                    新</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import { homepageCarouselList, addHomepageCarousel, homepageCarouselEditor, homepageCarouselDeletion } from "@/utils/api";
export default {
    name: 'CompanyInfo',
    data() {
        return {
            form: {
                title: '',
            },
            addform: {
                title: '',
                image: '',
            },
            CompanyTable: [],
            enableData: [{
                value: 0,
                label: '未使用'
            }, {
                value: 1,
                label: '已使用'
            }],
            dialogVisible: false,
            total: 100, //总条数
            pagesize: 10, //指定展示多少条
            currentPage: 1, //当前页码
            titles: '',
            roleHeadgear: null,

        };
    },
    mounted() {
        this.get_homepageCarouselList()
    },

    methods: {
        handleFileChange(event) {
            this.roleHeadgear = event.target.files[0];
            if (this.roleHeadgear) {
                this.$message.success('上传成功')
            }
        },
        // 查询公司列表
        async get_homepageCarouselList() {
            let data = JSON.parse(JSON.stringify(this.form));
            data.page = this.currentPage

            // 删除值为 "" 或 null 的字段
            Object.entries(data).forEach(([key, value]) => {
                if (value === "" || value === null) {
                    delete data[key];
                }
            });
            console.log(this.form, 'get_homepageCarouselList');

            const res = await homepageCarouselList(data).catch((err) => {
                return console.error(err);
            });
            if (res.data && res.data.code == "200") {
                // this.$message.success(res.data.msg);
                this.CompanyTable = res.data.data
                this.total = res.data.total
            } else {
                this.$message.error(res.data.msg);
            }
        },
        // 新增公司
        async add_addHomepageCarousel() {
            let data = new FormData()
            Object.entries(this.addform).forEach(([key, value]) => {
                if (value === "" || value === null) {
                    console.log(1);
                } else {
                    data.append(key, value);
                }
            });
            if (this.roleHeadgear) {
                data.append('image', this.roleHeadgear);
            }
            const res = await addHomepageCarousel(data).catch((err) => {
                return console.error(err);
            });
            if (res.data && res.data.code == "200") {
                this.$message.success(res.data.msg);
                this.currentPage = 1;
                this.get_homepageCarouselList()
                this.dialogVisible = false
                this.roleHeadgear = ''
            } else {
                this.$message.error(res.data.msg);
            }
        },
        // 更新公司
        async upd_homepageCarouselEditor() {
            let data = new FormData()
            Object.entries(this.addform).forEach(([key, value]) => {
                if (value === "" || value === null) {
                    console.log(1);
                } else {
                    data.append(key, value);
                }
            });
            if (this.roleHeadgear) {
                data.append('image', this.roleHeadgear);
            }
            const res = await homepageCarouselEditor(data).catch((err) => {
                return console.error(err);
            });
            if (res.data && res.data.code == "200") {
                this.$message.success(res.data.msg);
                this.dialogVisible = false
                this.currentPage = 1;
                this.get_homepageCarouselList()
                this.roleHeadgear = ''
            } else {
                this.$message.error(res.data.msg);
            }
        },
        // 刪除公司
        async del_homepageCarouselDeletion(id) {
            try {
                await this.$confirm("是否继续执行操作？", "提示", {
                    confirmButtonText: "是",
                    cancelButtonText: "否",
                    type: "warning",
                });

                let data = { id };
                const res = await homepageCarouselDeletion(data).catch((err) => {
                    return console.error(err);
                });

                if (res.data && res.data.code == "200") {
                    this.$message.success(res.data.msg);
                    this.dialogVisible = false;
                    this.currentPage = 1;
                    this.get_homepageCarouselList();
                } else {
                    this.$message.error(res.data.msg);
                }
            } catch (error) {
                // 用户点击取消或关闭对话框
                console.error(error);
            }
        },
        // 关闭弹窗时
        handleClose() {
            this.addform = {
                title: '',
                image: '',
            }
        },
        handleClosetable() {

        },
        getMenuTypeText(isUsed) {
            const menuTypeMap = {
                '1': '查看',
                '2': '增加',
                '3': '修改',
                '4': '擅长',
            };

            return menuTypeMap[isUsed] || '未知类型';
        },
        // 分页
        current_change(currentPage) {
            this.currentPage = currentPage;
            this.get_homepageCarouselList();
        },
        // 重置
        resetForm() {
            this.form = {
                title: '',
            }
            this.currentPage = 1
            this.get_homepageCarouselList();
        },
        // 编辑打开时
        tableEditing(row) {
            this.titles = '编辑'
            this.dialogVisible = true

            this.addform.title = row.title

            this.addform.id = row.id
            console.log(row, 'row');
        },
        // 新增打开时
        addbtn() {
            this.dialogVisible = true;
            this.titles = '新增'
        },
        // 滑块开关状态
        async changeSwitch(row) {
            console.log(row);
            let data = {
                enable: row.enable,
                id: row.id,
                company_name_EN: row.company_name_EN,
                company_name_JP: row.company_name_JP,
                company_name_KR: row.company_name_KR,
                company_name_CN: row.company_name_CN,
                company_name_TC: row.company_name_TC,
                remark: row.remark,
            }
            const res = await homepageCarouselEditor(data).catch((err) => {
                return console.error(err);
            });
            if (res.data && res.data.code == "200") {
                this.$message.success(res.data.msg);
                this.get_homepageCarouselList()
            } else {
                this.$message.error(res.data.msg);
            }
        }
    },
};
</script>
<style>
.el-dialog__body {
    padding: 0 10px !important;
}

.demo-table-expand {
    font-size: 0;
    margin-left: 10px;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
<style lang="less" scoped>
.DealerInfoStyle {
    width: 100%;
    padding: 0 10px;
    // background-color: aquamarine;
    height: calc(100vh - 100px);
    // border: 1px #000 solid;

    .cardAdmin {
        position: relative;
        // height: 18%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0;

        border: #ebeef5 solid 1px;
        padding: 0 5px;
        margin-bottom: 2px;


        .formContainer {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 0;
            align-self: baseline;
            padding-bottom: 40px;
        }

        .formSearch {
            width: 25%;
            min-width: 25%;
            margin: 10px 0;
            height: 40px;
            display: flex;
            justify-content: center;
        }
    }

    .pop-up-form {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        align-self: baseline;
        margin: 10px 0;
        justify-content: center;
        padding-right: 15px;

        .form-options {
            width: 100%;
            min-width: 100%;
            height: 40px;
            display: flex;
            justify-content: center;
            margin: 10px 0;
        }
    }
}</style>
  